<%--
Created by IntelliJ IDEA.
User: 0927
Date: 2020/9/24
Time: 19:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>信箱</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../css/footer.css">

    <link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">


</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container-fluid" style="background-color: white;">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index/index.jsp">精翼</a>
                </div>
                <div>
                    <!--向左对齐-->
                    <ul class="nav  navbar-left">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" style=" padding: 5px 0 0 0;">
                                <img alt="" class="img-circle" src="../../images/zly.png" width="40px" height="40px" />
                                <span style="color: #0e0101;font-size: 15px">
								<i>赵丽颖</i>
							</span>
                            </a>
                        </li>
                    </ul>
                    <!-- <form class="navbar-form navbar-left" role="search">
                        <button type="submit" class="btn btn-default">
						向左对齐-提交按钮
					</button>
                    </form> -->
                    <p class="navbar-text navbar-left">欢迎</p>
                    <!--向右对齐-->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li> -->
                        <!-- <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 信箱</a></li> -->
                        <!-- <span class="badge">3</span> -->
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
							管理员中心 <b class="caret"></b>
						    </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">个人资料</a></li>
                                <li><a href="#">修改头像</a></li>
                                <li><a href="#">设置</a></li>
                                <li class="divider"></li>
                                <li><a href="../logAndRegist/login.jsp">安全退出</a></li>
                                <li class="divider"></li>
                                <!-- <li><a href="#">另一个分离的链接</a></li> -->
                            </ul>
                        </li>
                        <li><a href="../logAndRegist/login.jsp"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
                    </ul>
                    <!-- <form class="navbar-form navbar-right" role="search">
                        <button type="submit" class="btn btn-default">
						向右对齐-提交按钮
					</button>
                    </form> -->
                    <!-- <p class="navbar-text navbar-right">向右对齐-文本</p> -->
                </div>
            </div>
        </nav>
        <!-- 以上为导航栏 -->

        <!-- <nav class="navbar navbar-default navbar-static-top" role="navigation">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">首页</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出</a></li>
            </ul>
        </nav> -->

        <div class="container">
            <div class="header-box" style="background-color: #f8f8f8;padding: 10px;">
                <div class="row">
                    <div class="col-md-5" style="float: right;">
                        <form class="bs-example bs-example-form" role="form">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入">
                                <span class="input-group-btn">
								<button type="button" class="btn btn-primary">
									<span class="glyphicon glyphicon-search"></span>&nbsp搜索
                                </button>
                                </span>
                            </div>
                        </form>
                    </div>

                    <div class="col-md-7">
                        <b style="font-size: 20px;">收件箱<span class="badge">3</span></b>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-refresh"></span>刷新
                          </button>
                        <button type="button" class="btn btn-danger btn-sm">
                            <span class=" glyphicon glyphicon-trash"></span>批量删除
                          </button>
                        <button type="button" class="btn bg-success btn-sm" data-toggle="modal" data-target="#myModal">
                            <span class="glyphicon glyphicon-plus"></span>增加
                          </button>
                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            增加
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- 表单 -->
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">聚焦</label>
                                                <div class="col-sm-10">
                                                    <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="disabledInput" class="col-sm-2 control-label">
                                                    禁用
                                                </label>
                                                <div class="col-sm-10">
                                                    <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
                                                </div>
                                            </div>
                                            <fieldset disabled>
                                                <div class="form-group">
                                                    <label for="disabledTextInput" class="col-sm-2 control-label">禁用输入（Fieldset disabled）
                                                    </label>
                                                    <div class="col-sm-10">
                                                        <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）
                                                    </label>
                                                    <div class="col-sm-10">
                                                        <select id="disabledSelect" class="form-control">
                                                            <option>禁止选择</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </fieldset>
                                            <div class="form-group has-success">
                                                <label class="col-sm-2 control-label" for="inputSuccess">
                                                    输入成功
                                                </label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="inputSuccess">
                                                </div>
                                            </div>
                                            <div class="form-group has-warning">
                                                <label class="col-sm-2 control-label" for="inputWarning">
                                                    输入警告
                                                </label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="inputWarning">
                                                </div>
                                            </div>
                                            <div class="form-group has-error">
                                                <label class="col-sm-2 control-label" for="inputError">
                                                    输入错误
                                                </label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="inputError">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
				                        </button>
                                        <button type="button" class="btn btn-primary">
					                        提交
				                        </button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                    </div>

                </div>
            </div>

        </div>

        <div class="container">
            <table class="table table-hover table-responsive">
                <caption>悬停表格布局</caption>
                <thead>
                    <tr>
                        <td><input type="checkbox" id="ck_all"></td>
                        <th>发件人</th>
                        <th>状态</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr >
                        <td><input type="checkbox" name="ck_content"></td>
                        <td>xxx</td>
                        <td><a href="readMail.jsp">未读</a></td>
                        <td>2020-09-27 11:02</td>
                        <td>
                            <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                            <a class="text-warning" href="#"><span class="glyphicon glyphicon-eye-open"></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="ck_content"></td>
                        <td>xxx</td>
                        <td>未读</td>
                        <td>2020-09-27 11:02</td>
                        <td>
                            <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                            <a class="text-warning" href="#"><span class="glyphicon glyphicon-eye-open"></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="ck_content"></td>
                        <td>xxx</td>
                        <td>未读</td>
                        <td>2020-09-27 11:02</td>
                        <td>
                            <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                            <a class="text-warning" href="#"><span class="glyphicon glyphicon-eye-open"></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="ck_content"></td>
                        <td>xxx</td>
                        <td>未读</td>
                        <td>2020-09-27 11:02</td>
                        <td>
                            <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                            <a class="text-warning" href="#"><span class="glyphicon glyphicon-eye-open"></span></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="ck_content"></td>
                        <td>xxx</td>
                        <td>未读</td>
                        <td>2020-09-27 11:02</td>
                        <td>
                            <a class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a>
                            <a class="text-warning" href="#"><span class="glyphicon glyphicon-eye-open"></span></a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="5">
                            <div style="text-align: center;">
                                <ul class="pagination">
                                    <!-- <ul class="pagination pager"></ul> -->
                                    <li><a href="#">&laquo;</a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


<div id="footer">

</div>
    <script src="..\..\plugins\jquery\jquery.min.js"></script>
    <script src="..\..\plugins\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

    <style>
        /* Custom Styles */
        
        ul.nav-tabs {
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        
        ul.nav-tabs li {
            margin: 0;
            border-top: 1px solid #ddd;
        }
        
        ul.nav-tabs li:first-child {
            border-top: none;
        }
        
        ul.nav-tabs li a {
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        
        ul.nav-tabs li.active a,
        ul.nav-tabs li.active a:hover {
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        
        ul.nav-tabs li:first-child a {
            border-radius: 4px 4px 0 0;
        }
        
        ul.nav-tabs li:last-child a {
            border-radius: 0 0 4px 4px;
        }
        
        ul.nav-tabs.affix {
            top: 30px;
            /* Set the top position of pinned element */
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#myNav").affix({
                offset: {
                    top: 125
                }
            });
        });

        $(function () {
            //1.获取select对象
            let ck = document.getElementById("ck_all");
            //3.获取下面所有的ck
            let cks = document.getElementsByName("ck_content");
            //2.给checkbox添加单击事件
            ck.onclick=function () {
                if (ck.checked){
                    for (let i=0;i<cks.length;i++){
                        cks[i].checked=true;
                    }
                }else {
                    for (let i=0;i<cks.length;i++){
                        cks[i].checked=false;
                    }
                }
            }
        });

        $(function(){
            $("#footer").load("../common/footer.jsp");
        })

    </script>
</body>

</html>